<template>
  <div class="buy-meal">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <div class="buy-body">
      <div class="buy-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item,index) in typelist" :key="index" :title="item.type_name" @click="typechange(item.id)" />
        </van-sidebar>
      </div>
      <div class="buy-right">
        <div class="foods">
          <div class="meal-list" v-for="(itema, index) in boxMealList" :key="index">
            <van-card :price="itema.issprice==1?itema.sprice:itema.price" :origin-price="itema.issprice==0?null:itema.price" :desc="itema.remark" :title="itema.name" :thumb="img+itema.imgarr[0]">
              <template #tags>
                <van-tag plain text-color="#C599F2" type="#C599F2">
                  剩余{{itema.stocknum == null ? "0" : itema.stocknum}}份</van-tag>
                <van-tag plain text-color="#C599F2" type="#C599F2">有效期{{ itema.qualityperiod }}</van-tag>
              </template>
              <template #footer>
                <van-stepper v-model="itema.amount" theme="round" :name="itema.id" min="0" button-size="0.55rem" :show-input="itema.amount == 0?false:true" :show-minus="itema.amount == 0?false:true" @change="change" :step="1" />
              </template>
            </van-card>
          </div>
          <div style="height:2rem"></div>
        </div>
        <van-empty description="暂无商品" v-if="boxMealList.length == 0" />
      </div>
    </div>
    <div class="buy-foot">
      <div class="foot-info">
        <div class="foot-num">
          <van-icon v-if="money!=0" :name="require('@/assets/buy/shopcart.png')" size="1rem" />
          <span v-if="money!=0" style="align-self: center;">￥{{ money }}</span>
        </div>
        <div class="foot-submit">
          <van-button v-if="money>=threshold" type="warning" @click="checkOut()">马上结算</van-button>
          <span v-if="money<threshold" class="threshold">￥{{threshold}}起送</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "BuyBoxMeal",
  data () {
    return {
      typelist: [],
      activeKey: 0,
      backIcons: "",
      startPosition: 1,
      advertList: [],
      boxMealList: [],
      money: 0,
      threshold: 0, //起购金额
      active: 0,
      orderid: 0,
      userid: "",
      amount: 0, // 下单总数
      shopid: "",
      zongshu: "",
      curr: "",
      showminus: true,
      commitlist: [],
      type: "",
      signing: '',
    };
  },
  methods: {
    filt (id, index) {
      var commitlists = this.commitlist
      var finds = commitlists.findIndex((commitlists) => commitlists.good_id == id)
      if (finds != -1) {
        this.boxMealList[index].amount = commitlists[finds].buy_num
      }
    },
    info (id) {
      this.$axios("/products/productslist", {
        state: 1, //1-上架；2-下架
        type: 2, //区别：1-返回自己的商品类型，2-返回购买时总部/经销商的商品类型
        prodtype: id, //商品类型
      }).then((res) => {
        this.boxMealList = res.data.data.map((v) => {
          return {
            ...v,
            amount: 0,
            imgarr: v.menuimage.split(',')
          };
        })
        var shopcart = this.boxMealList
        shopcart.map((v, index) => {
          this.filt(v.id, index)
        });
      });
    },
    typelist1 () {
      this.$axios("/products/prodtypelist", {
        type: 2,
      }).then((res) => {
        this.typelist = res.data.data;
        this.info(res.data.data[0].id);
      });
    },
    onClickLeft () {
      this.$router.go(-1);
    },
    minussign () {
      if (this.amount == 0) {
        this.showminus = false;
      } else {
        this.showminus = true;
      }
    },
    // 提交结算
    checkOut () {
      var commitlist_sub = this.commitlist.filter(fn => {
        return fn.buy_num != 0
      })
      this.$axios("/buy/buyorder", {
        detail: commitlist_sub,
      }).then((res) => {
        if (res.data.code == 1) {
          this.$router.push({
            path: "/regplaceorder",
            query: { id: res.data.data, money: this.money, type: this.type },
          });
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    getMoneys () {
      this.$axios("/index/shopsmoney")
        .then((res) => {
          this.threshold = res.data.data;
        });
    },
    zongmoney (data) {
      this.$axios("/weixin/calculatemoney", {
        detail: data,
      }).then((res) => {
        this.money = res.data.data;
      });
    },
    change (fn, data) {
      var onelist = {
        buy_num: fn,
        good_id: data.name,
      };
      var goodslist = this.commitlist;
      var cl = goodslist.findIndex((goodslist) => goodslist.good_id == data.name)
      if (cl == "-1") {
        this.commitlist.push(onelist);
      } else {
        this.commitlist[cl].buy_num = fn;
      }
      this.zongmoney(this.commitlist);
    },
    typechange (fn) {
      this.info(fn);
    },
    //进入页面执行本方法---------------------------
    getWxCode () {
      let appid = 'wxebd8a80c29e0c35f';
      let resUrl = 'http%3A%2F%2Ffreeze.ganmiaoedu.com%2Fview%2F%23%2Fregbuy%2F'; // http://freeze.ganmiaoedu.com/view/#/regbuy/
      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${resUrl}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
      this.code = this.getUrlCode().code;
      //如果没有code 去获取code
      if (this.code == null) {
        window.location.href = url;
      } else {
        this.$axios("/index/jump", {
          code: this.code,
        })
      }
    },
    //截取code
    getUrlCode () { // 截取url中的code方法
      var url = location.search
      var theRequest = new Object()
      if (url.indexOf("?") != -1) {
        var str = url.substr(1)
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
        }
      }
      localStorage.setItem('WxCode', theRequest.code)
      return theRequest
    },
  },
  created () {
    // this.type = localStorage.getItem("type")
    this.getWxCode()
    this.typelist1();
    this.minussign();
    this.getMoneys();
  },
};
</script>

<style lang="less" scoped>
.buy-meal {
  display: flex;
  flex-direction: column;
  height: 100%;
  /deep/ .van-card {
    background-color: #fff;
  }
  /deep/ .van-tag {
    border-radius: 50px;
    margin: 5px 10px;
  }
  /deep/ .van-card__title {
    font-size: 0.4rem;
    font-weight: bold;
  }
  /deep/ .van-card__price {
    color: red;
    font-weight: bold;
  }
  /deep/ .van-card__desc {
    color: #bbb;
  }
  /deep/ .van-stepper__plus {
    color: #fff;
    background-color: #1bb89c;
  }
  /deep/ .van-stepper__minus {
    border: 1px solid #1bb89c;
    color: #1bb89c;
  }
  /deep/ .van-nav-bar {
    background-color: white !important;
  }
  /deep/ .van-nav-bar__title {
    color: black !important;
  }
  .foot-info,
  .foot-num,
  .foot-submit {
    display: flex;
  }
  .buy-body {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
  }
  .buy-right {
    width: 80%;
    height: 100%;
    padding-bottom: 1.5rem;
    background-color: #fff;
    overflow: scroll;
  }
  .buy-left {
    width: 20%;
    height: 100%;
    background-color: #f5f5f5;
    box-sizing: border-box;
    padding-bottom: 1.5rem;
    /deep/ .van-sidebar {
      width: 2rem;
      height: 100%;
      margin: 0;
    }
    /deep/ .van-sidebar-item {
      background-color: #f5f5f5;
    }
    /deep/ .van-sidebar-item--select,
    .van-sidebar-item--select:active {
      background-color: #fff;
    }
    /deep/ .van-sidebar-item--select::before {
      background-color: #1bb89c;
    }
    /deep/ .van-sidebar-item__text {
      font-size: 20px;
    }
  }
  .buy-foot {
    position: fixed;
    width: 100%;
    height: 1.34rem;
    bottom: 10px;
    z-index: 999;
    /deep/ button {
      height: 1.34rem;
      border-radius: 0;
      font-weight: bold;
    }
    .foot-info {
      width: 85%;
      height: 1.34rem;
      margin: 0 auto;
      background-color: #1bb89c;
      border-radius: 50px;
    }
    .foot-num,
    .foot-submit {
      width: 50%;
    }
    .foot-num {
      font-size: 40px;
      font-weight: bold;
      padding: 10px 25px;
      color: white;
      box-sizing: border-box;
      align-self: center;
    }
    .foot-submit {
      justify-content: flex-end;
      .threshold {
        color: white;
        font-size: 30px;
        align-self: center;
        padding-right: 25px;
      }
      /deep/.van-button {
        border-radius: 0 50px 50px 0;
      }
    }
  }
}
</style>